<template>
  <div class="signin">
    <div class="header">
      <div class="title">签到领青币</div>
      <div v-if="!active" class="status">今日未签到</div>
      <div v-else class="status">今日已签到</div>
    </div>
    <div class="list">
      <div v-for="(item, index) in signList" :key="index" class="item" @click="signClick(item, index)">
        <div class="point">+{{ item.point }}</div>
        <image src="/static/images/points/coin-middle.png" class="img" />
        <div v-if="!item.active" class="day">{{ item.text }}</div>
        <div v-else class="gived">
          <u-icon name="checkmark-circle" size="22" />
          <div class="gived-text">已领青币</div>
        </div>
      </div>
    </div>

    <div class="footer" @click="onToPointDetail">
      <div class="footer-title">我的青币: {{ userInfo.points }}</div>
      <div class="footer-desc">明细<u-icon name="arrow-right" color="rgba(0, 0, 0, 0.5)" size="12" /></div>
    </div>
  </div>
</template>

<script>
import {
  wx_customer_signin_list,
  wx_customer_signin_submit
} from '../../../api/index.js'
import dayjs from 'dayjs'
import store from '@/store'
import {
  mapState
} from 'vuex'
export default {
  data() {
    return {
      active: false,
      listData: [],
      signList: [{
        text: '第1天',
        point: 10,
        active: false
      }, {
        text: '第2天',
        point: 10,
        active: false
      }, {
        text: '第3天',
        point: 10,
        active: false
      }, {
        text: '第4天',
        point: 10,
        active: false
      }, {
        text: '第5天',
        point: 10,
        active: false
      }],
      days: 0
    }
  },
  computed: {
    ...mapState(['userInfo'])
  },
  mounted() {
    this.wx_customer_signin_list()
  },
  methods: {
    onToPointDetail() {
      this.$utils.navigateToPage('/pagesPoints/pointDetail')
    },
    signClick(item, index) {
      wx_customer_signin_submit().then(res => {
        if (res.success) {
          wx.showToast({
            title: '签到成功',
            icon: 'none',
            duration: 3000
          })
        }
      }).finally(() => {
        this.wx_customer_signin_list()
        store.dispatch('getUserInfo')
      })
    },
    async wx_customer_signin_list() {
      const data = await wx_customer_signin_list()
      console.log('签到列表')
      console.log(data)
      if (data.customer_signin) {
        if (!data.customer_signin.first_date) {
          this.signList.forEach(item => item.active = false)
          return
        }

        if (data.customer_signin.last_date) {
          if (data.customer_signin.last_date === dayjs().format('YYYY-MM-DD')) {
            // 今日已签到
            this.active = true
          }
        }
        this.days = data.customer_signin.days || 0
        if (data.customer_signin.days > 0) {
          this.signList.forEach((item, index) => {
            if (index + 1 <= data.customer_signin.days) {
              item.active = true
            }
          })
        }
      } else {
        this.signList.forEach(item => item.active = false)
      }
    }
  }
}
</script>

<style lang="scss" scoped>
	.gived {
		position: absolute;
		width: 100%;
		height: 100%;
		background: #F2F2F2;
		display: flex;
		flex-flow: column nowrap;
		align-items: center;
		justify-content: center;

		&-text {
			font-weight: 500;
			font-size: 20rpx;
			color: #000000;
			line-height: 28rpx;
			text-align: right;
			font-style: normal;
			margin-top: 8rpx;
		}
	}

	.signin {
		width: 100%;
		min-height: 334rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 2rpx 6rpx 0rpx rgba(0, 0, 0, 0.05);
		border-radius: 20rpx;
		box-sizing: border-box;
		padding: 26rpx;
	}

	.header {
		display: flex;
		justify-content: space-between;

		.title {
			font-weight: 500;
			font-size: 32rpx;
			color: #000000;
			line-height: 44rpx;
			text-align: left;
			font-style: normal;
		}

		.status {
			font-weight: 400;
			font-size: 20rpx;
			color: rgba(0, 0, 0, 0.5);
			line-height: 28rpx;
			text-align: right;
			font-style: normal;
			border-radius: 16rpx;
			border: 1rpx solid rgba(0, 0, 0, 0.5);
			padding: 4rpx 16rpx;
		}
	}

	.list {
		display: flex;
		column-gap: 14rpx;
		margin: 26rpx 0;

		.item {
			position: relative;
			flex: 1;
			min-height: 152rpx;
			background: #F2F2F2;
			border-radius: 18rpx;
			display: flex;
			flex-flow: column nowrap;
			align-items: center;
			box-sizing: border-box;
			padding: 6rpx 0 12rpx;

			.point {
				font-weight: bold;
				font-size: 32rpx;
				color: #FF8800;
				font-style: normal;
			}

			.img {
				width: 67.88rpx;
				height: 67.88rpx;
				flex-shrink: 0;
			}

			.day {
				font-weight: 500;
				font-size: 20rpx;
				color: #000000;
				line-height: 28rpx;
				font-style: normal;
			}
		}
	}

	.footer {
		display: flex;
		align-items: center;

		&-title {
			font-weight: 500;
			font-size: 24rpx;
			color: #000000;
			line-height: 34rpx;
			font-style: normal;
		}

		&-desc {
			font-weight: 400;
			font-size: 20rpx;
			color: rgba(0, 0, 0, 0.5);
			line-height: 28rpx;
			text-align: left;
			font-style: normal;
			display: flex;
			justify-content: center;
			align-items: center;
			margin-left: 40rpx;
		}
	}
</style>
